<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryGoodsList" :inline="true" label-width="110px">
        <el-form-item label="erp库区名称">
          <el-input v-model="queryGoodsList.huowname" placeholder="请输入erp库区名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="仓库">
          <el-input v-model="queryGoodsList.stoName" placeholder="请输入仓库" clearable></el-input>
        </el-form-item>
        <el-form-item label="剂型">
          <el-input v-model="queryGoodsList.stoAreaName" placeholder="请输入剂型" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-circle-plus-outline"
                     @click="add">新增
          </el-button>
          <el-button type="primary" icon="el-icon-search" v-hasPermi="['storeM:storeCheck:query']"
                     @click="getErpList">查询
          </el-button>
          <el-button type="danger" icon="el-icon-refresh" @click="clearAll">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="goodsList" border height="605px" id="data-table">
        <el-table-column show-overflow-tooltip prop="stoName" label="仓库名称" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="huowname" label="库区名称" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="stoAreaName" label="剂型名称" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="erpName" label="erp库区" align="center"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">关联erp剂型</el-button>
            <el-button type="text" icon="el-icon-edit" @click="deleteBtn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout=" total,prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize"
                     :page-sizes="[10, 20, 50, 100]" :total="total">
      </el-pagination>
    </el-card>
    <el-dialog title="关联erp剂型" :visible.sync="visibleJxing" width="600px">
      <el-form :model="formList" :inline="true" label-width="110px">
        <el-form-item label="erp剂型" :label-width="formLabelWidth" prop="erpAgentId">
          <el-select multiple clearable v-model="formList.erpAgentId" style="width: 100%;">
            <el-option v-for="(item, index) in jixingListErp" :key="index" :value="item.jixing"
                       :label="item.jixing">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
    <shiftUnit ref="shiftUnitRef" :visible.sync="visible" @successfun="addSuccess"></shiftUnit>
  </div>
</template>
<script>
import {
  findErpMapList, //查询
  queryJiXingMap,//获取修改信息
  queryErpJiXing,//编辑ERP剂型
  insertJiXingMap,//提交
  deleteErpMap,//删除
} from '@/api/storeM/yxl.js'
import shiftUnit from '@/views/storeM/storeShift/components/shiftUnit.vue'

export default {
  data() {
    return {
      queryGoodsList: {
        huowname: '',
        stoName: '',
        stoAreaName: ''
      },
      visible: false,
      goodsList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      formList: {
        erpAgentId: []
      },
      formLabelWidth: '68px',
      jixingListErp: [],//erp剂型
      visibleJxing: false,//关联erp剂型弹窗
      stoAeraId:'',
    }
  },
  created() {
    this.getErpList();
    this.getErpJiXing();//获取erp剂型
  },
  components: {
    shiftUnit
  },
  methods: {
    //删除
    deleteBtn(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id:row.id,
          areaId: row.stoAreaId
        }
        deleteErpMap(params).then(res => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.getErpList();
          }
        })
      }).catch(()=>{
        this.$message.info('已取消');
      })
    },
    //关闭弹框
    handleClose() {
      this.visibleJxing = false;
    },
    //关联
    submit() {
      let parmas = {
        erpAgentId: this.formList.erpAgentId.join(','),
        areaId:this.stoAeraId
      }
      insertJiXingMap(parmas).then(res=>{
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.handleClose();
          this.getErpList();
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    //获取ERP剂型
    getErpJiXing() {
      queryErpJiXing().then(res => {
        this.jixingListErp = res.data;
      })
    },
    addSuccess() {
      this.getErpList();
    },
    //新增
    add() {
      this.visible = true;
    },
    //修改
    handleEdit(row) {
      this.visibleJxing = true;
      this.stoAeraId = row.stoAreaId;
      queryJiXingMap({areaId: row.stoAreaId}).then(res => {
        this.formList = res.data;
        this.formList.erpAgentId = res.data.jxList;
      });
    },
    //分页
    handleSizeChange(newsize) {
      this.pageNum = 1;
      this.pageSize = newsize;
      this.getErpList();
    },
    handleCurrentChange(newpage) {
      this.pageNum = newpage;
      this.getErpList();
    },
    getErpList() {
      let params = {
        ...this.queryGoodsList,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      findErpMapList(params).then(res => {
        this.goodsList = res.rows;
        this.total = res.total;
      })
    },
    clearAll() {
      this.queryGoodsList.huowname = ''; //库区名称
      this.queryGoodsList.stoName = ''; //仓库
      this.queryGoodsList.stoAreaName = ''; //清空剂型
      this.getErpList();
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}

.el-pagination {
  float: right;
  margin: 20px;
}
</style>
